<template>
  <div class="loginBox blackOrWhite">
    <div class="loginHeader">
      <i @click="routeOut" class="iconfont icon-fanhui noClick"></i>
    </div>
    <div class="loginVal">
      <p class="title">登录知乎日报</p>
      <p class="signIn">选择登录方式</p>
      <div class="loginImg">
        <img @click="loginFn" src="@/public/imges/zhihu.png" alt />
        <img @click="loginFn" src="@/public/imges/weibo.png" alt />
      </div>
      <p class="notes">
        登录即代表你同意
        <span @click="TipsFn">《知乎协议》</span>和
        <span @click="TipsFn">《隐私保护指引》</span>
      </p>
    </div>
    <lfooter />
  </div>
</template>

<script>
import {mapState, mapActions} from 'vuex';
import v_footer from "@/components/footer.vue";
export default {
  data: function() {
    return {
      dayAndNight: true
    };
  },
  computed : {
    ...mapState('login',['isLogin'])
  },
  components: {
    lfooter: v_footer
    // [Dialog.Component.name]: Dialog.Component
  },
  methods: {
    ...mapActions('login',['set_chenge_isLogin']),
    routeOut() {
      this.$router.go(-1);
    },
    TipsFn() {
      this.$notify({
        type: "primary",
        message: "该功能暂未开放",
        duration: 1500
      });
    },
    loginFn() {
      this.$dialog
        .confirm({
          message: "登录功能暂未开发，将模拟登录！"
        })
        .then(() => {
          // on close
          this.set_chenge_isLogin(1)
        })
        .catch(() => {
          // on cancel
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.loginHeader {
  padding: 0.1rem;
  font-weight: 700;
}
.loginVal {
  text-align: center;
  .noClick {
    font-size: 0.28rem;
    color: #333;
  }
  .loginImg {
    margin: 0.2rem 0 0.4rem 0;
    img {
      width: 0.5rem;
      height: 0.5rem;
      margin: 0 0.2rem;
    }
  }
  .title {
    font-size: 0.24rem;
    font-weight: 700;
    margin-top: 15%;
  }
  .signIn,
  .notes {
    font-size: 0.14rem !important;
    color: #666;
    margin-top: 0.2rem;
  }
  .notes {
    span {
      color: #4395ff;
      font-size: 0.14rem !important;
    }
  }
}
</style>